<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/lib/vue.min.js"></script>
    <link rel="stylesheet" href="css/hint.css">
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        [class*="hint--top"] {
            position: relative;
        !important;
            /* display: inline-block; */
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        .table {
            text-align: center;
            width: 96%;
            max-width: 100%;
            margin: 20px 0px 10px 20px;
            border: 1px solid #393D49;
            box-shadow: 0px 0px 10px #393D49;
        }

        .table > thead > tr > th,
        .table > tbody > tr > th,
        .table > tfoot > tr > th,
        .table > thead > tr > td,
        .table > tbody > tr > td,
        .table > tfoot > tr > td {
            padding: 20px 8px 20px 8px;
            line-height: 1.42857143;
            vertical-align: top;
        }

        .center tr td {
            align-items: center;
            text-align: center;
        }

        .ratio {
            border-radius: 4px;
            background: #eeeeee;
        }

        .ratio:hover:after {
        }

        .ratio:hover {
            background: #FFB800;
        }

        .ratio:active {
            background: #ff1d25;
        }

        .tanchu {
            display: block;
            position: absolute;
            top: -600px;
            left: 24%;
            width: 40%;
            height: auto;
            background: white;
            transition: 0.5s;
            border-radius: 5px;
            box-shadow: 0px 0px 10px #c2c2c2;
            text-align: center;
            z-index: 777;
        }

        .tanchu > ul > li {
            display: flex;
            padding: 4px 20px;
            justify-content: center;
        }

        li {
            list-style: none;
        }

        .all {
            position: absolute;
            display: none;
            z-index: 44;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: grey;
            opacity: 0.6;
        }

        .tanchu > ul {
            margin-bottom: 30px;
        }

        .tanchu > ul > li > span {
            margin: 0px 30px;
            display: block;
            width: 80px;
            padding: 4px 10px;
            background: #79C48C;
            color: white;
            border-radius: 5px;
        }

        .spans {
            background: #ff1d25 !important;
            margin-top: 20px !important;
            padding: 4px 10px !important;

        }

        .spans:hover {
            background: #1daaf5;
            opacity: 0.8;
        }

        input {
            border: 0px;
            border-radius: 4px;
            background: #e2e2e2;
            width: 70px;
            height: 20px;
            text-align: center;
        }

        .kaiguan {
            display: flex;
            width: 100%;
            height: auto;
            align-items: center;
        }

        .kaiguan > a {
            list-style: none;
            text-decoration: none;
            margin-left: 5%;
            margin-top: 30px;
        }

        .kaiguan > span {
            list-style: none;
            text-decoration: none;
            margin-left: 5%;
            margin-top: 30px;
        }

        #onOff {
            background: #79C48C;
            padding: 4px 20px;
            margin-left: 10px;
            border-radius: 5px;
        }

        #onOff:hover {
            background: #1daaf5;
            opacity: 0.8;
            color: #e2e2e2;
        }

        #onOff:focus {
            box-shadow: 0px 0px 10px red;
        }

    </style>
</head>
<body>
<div class="all">

</div>
<div class="tanchu">
    <h2 style="margin-top: 20px;margin-bottom: 10px">设置返佣利率</h2>
    <ul>
        <li>
            <span>已有级别</span><span id="preLevel"></span>
        </li>
        <li>
            <span>推销产品</span><span id="thirdLevelId"></span>
        </li>
        <li>
            <span>直推返佣</span><span><input type="text" value="" id="ratio"/></span>
        </li>
        <li>
            <span class="spans" onclick="queren()">确认</span>
            <span class="spans " onclick="quxiaol()">取消</span>
        </li>
    </ul>
</div>
<div class="kaiguan">
    <span href="javascript:;">按钮开关 <font color="#a9a9a9">（绿色开启状态）</font>
    </span>
    <a href="javascript:;" id="onOff" onclick="onOff()">开
    </a>
</div>
<table class="table center" id="app">
    <tbody>
    <tr style=" background: rgb(210, 210, 210)">
        <td style="padding: 0px;text-align: center;font-size: 20px;display:inline;align-items: center"><span
                style="display:block;padding-top: 15px">级别 <font size="4">\</font> 购买的产品</span></td>
        <td v-for="(daili,index) in dailis">{{daili.name}}</td>
    </tr>
    <tr v-for="daili in dailis">
        <td style=" background: rgb(210, 210, 210);width: 15%">{{daili.name}}</td>
        <td v-for="(value,index) in values" class="ratio hint--top" data-hint="点击修改返佣比例" onclick="dianji(this)"
            v-if="value.preLevel == daili.grade ">
            <l>{{value.ratio}}</l>
            <span style="display: none">{{index}}</span>
            <b style="display: none">{{daili.name}}</b>
            <d style="display: none">{{value.id}}</d>
            <li style="display: none">{{value.thirdLevelId}}</li>
        </td>
    </tr>
    </tbody>
</table>

</body>
<script>

    var brandId = sessionStorage.getItem(3)            //获取BrandId

    //
    var status; //开关状态  0 --关  1 -- 开
    function onOff() {
        var onFF = $('#onOff').text();
        if (onFF == "开") {
            status = 0;
            setonOff();
        } else {
            status = 1;
            setonOff();
        }
    }


    //设置开关功能键
    function setonOff() {
        $.ajax({
            url: window.baseUrl+"user/thirdlevel/ratio/onoff",
            type: "post",
            data: {
                status: status,
                brandId: brandId
            },
            success: function (data) {
                console.log("开启开关按钮功能、、、、、、")
                console.log(data.result)
                if (data.resp_code == "999999") {
                    alert("网络出现延迟，请稍后刷新。。。")
                }
                if (data.result.isNewRebate == 1) {
                    $("#onOff").html("开");
                    $('#onOff').css('background', '#79C48C');
                } else {
                    $("#onOff").html("关");
                    $('#onOff').css('background', '#c2c2c2');
                }
            }
        })
    }
    //input效果
    $('#ratio').focus(function () {
        $(this).css("box-shadow", '0px 0px 10px blue')
    })
    //修改返佣比例
    function queren() {
        console.log(id);
        ratio = $('#ratio').val();
        ratio = parseFloat(ratio);
        preLevel = $('#preLevel').text();
        thirdLevelId = $('#thirdLevelId').text();
        if (ratio <= 1 && ratio >= 0) {
            $.ajax({
                url: window.baseUrl+'user/thirdlevel/ratio/set/by/id',
                type: "post",
                data: {
                    thirdRatioId: id,
                    ratio: ratio
                },
                success: function (data) {
                    console.log("获取数据成功。。。。。。");
                    console.log(data);
                    if (data.resp_code == "999999") {
                        alert("网络出现延迟，请稍后刷新。。。")
                    }
                    $('.all').hide();
                    $('.tanchu').css('top', '-600px');
                    vms.findFanyong();
//                    shuaxin();
                },
                error: function () {
                    alert("获取数据失败！")
                }
            })
        } else {
            alert("请输入正确的利率！")
        }
    }

    //刷新界面
    function shuaxin() {
        window.location.reload(true);
    }

    //关闭弹出窗
    function quxiaol() {
        $('.all').hide();
        $('.tanchu').css('top', '-600px');
    }

    var maxGrade         //最大等级
    var maxPreLevel;  //最大的等级

    var vms = new Vue({
        el: "#app",
        data: {
            values: [],
            dailis: [],
            maxPreLevel: maxPreLevel,
        },
        methods: {
            //获取返利费率
            findFanyong: function () {
                var self = this;
                $.ajax({
                    url: window.baseUrl+"user/thirdlevel/ratio/query/all",
                    type: "POST",
                    data: {
                        brandId: brandId,
                    },
                    success: function (data) {
                        var ccm;
                        console.log("获取数据成功。。。。");
                        console.log(data);
                        var val = data.result;
                        val = val.sort(function (a,b) {
                                 return a.thirdLevelId - b.thirdLevelId;
                        })
                        self.values = val;
                        console.log(data.brand.isNewRebate);
                        if (data.resp_code == "999999") {
                            alert("网络出现延迟，请稍后刷新。。。")
                        }
                        if (data.brand.isNewRebate == 1) {
                            $("#onOff").html("开");
                            $('#onOff').css('background', '#79C48C');
                        } else {
                            $("#onOff").html("关");
                            $('#onOff').css('background', '#c2c2c2');
                        }
                        ccm = data.ThirdLevelDistribution;
                        ccm = ccm.sort(function (a, b) {
                            return a.id - b.id;
                        });
                        self.dailis = ccm;
                        var numbers = new Array();
                        for (var i = 0; i < data.ThirdLevelDistribution.length; i++) {
                            numbers.push(data.ThirdLevelDistribution[i].grade);
                        }
                        numbers = numbers.sort(function (a, b) {
                            return b - a;
                        });
                        maxGrade = numbers[0];
                        var number = new Array();
                        self.maxPreLevel = maxGrade;
                    },
                    error: function () {
                        alert("获取信息失败！")
                    }
                })
            }
        }
    })

    var ratio;  //返利利率
    var preLevel;  //等级
    var thirdLevelId;//产品ID
    var id;
    function dianji(obj) {
        id = $(obj).children('d').text();
        ratio = $(obj).children('l').text();
        preLevel = $(obj).children('b').text();
        thirdLevelId = $(obj).children('span').text();
        for (var i = 0; i < maxGrade; i++) {
            if (thirdLevelId < ((i + 1) * maxGrade)) {
                thirdLevelId = i + 1;
                break;
            }
        }
        var chanpingId = $(obj).parent().parent().children().children().eq(thirdLevelId).text();

        $('#ratio').val(ratio);
        $('#preLevel').html(preLevel);
        $('#thirdLevelId').html(chanpingId);
        $(".all").show();
        $('.tanchu').css('top', '150px')
        console.log(id);
    }

    $(".all").click(function () {
        $(this).hide();
        $('.tanchu').css('top', '-600px')
    })

    vms.findFanyong();


    //    侦听是否连上网络
    window.onLineHandler = function () {
        console.log("连上了！")
    };
    //    侦听是否断开网络
    window.offLineHandler = function () {
        console.log("断开网络！")
    };

</script>
</html>